<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      fit="true"
      :align='center'
      :cell-style='cellStyle'
      :header-cell-style='rowClass'
      style="width: 100%">
      <el-table-column
        prop="pid"
        label="产品编号"
        v-if=false>
      </el-table-column>

      <el-table-column
        prop=""
        label="产品图片"
        width="">
        <template slot-scope="scope">
          <el-image
            style="width: 150px; height: 80px"
            :src="scope.row.img"
            fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        width="">
      </el-table-column>
      <el-table-column
        prop="type"
        label="产品类型"
        width="">
      </el-table-column>
      <el-table-column
        prop="description"
        label="产品描述"
        width="">
      </el-table-column>
      <el-table-column
        prop=""
        label="查看详情"
        width="">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看产品文章</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="产品操作"
        width="">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="resetRow( scope.row)"
            type="text"
            size="40">
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="40">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>您确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isDelete">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {requestGet, requestPost} from "../../../../network/request";

  export default {
    name: "test",
    data() {
      return {
        tableData: [],
        index: null,
        id: null,
        dialogVisible: false,
      }
    },
    mounted() {

      requestGet({
        url: 'product/selectAll'
      }).then(response=>{
        this.tableData= response.data;
      })
    },
    methods: {
      cellStyle({row, column, rowIndex, columnIndex}){
        return 'text-align:center';
      },
      rowClass({row, rowIndex}){
        return 'text-align:center';
      },
      handleClick(row) {
        this.$router.push("/content/productProfile/"+row.pid)
      },
      isDelete(){
        this.dialogVisible = false;
        //删除信息
        requestPost({
          url: 'product/delete',
          data: {
            id: this.id
          }
        })
        //删除图片
        this.tableData.splice(this.index, 1);
      },
      deleteRow(index, rows) {
        this.index = index;
        this.id = rows.pid;
        this.dialogVisible = true
      },
      resetRow(row){
        let id = row.pid;
        this.$router.push("/content/resetProduct/"+id)
      },
    }
  }
</script>

<style scoped>
  /*.table{*/
  /*  padding-right: 3%;*/
  /*  margin-left: 0;*/
  /*}*/
</style>
